<!--
 * @Author: likaijie 847094299@qq.com
 * @Date: 2025-04-07 10:15:29
 * @LastEditors: likaijie 847094299@qq.com
 * @LastEditTime: 2025-04-07 11:12:00
 * @Description: 
-->
<template>
  <div class="provider-compatibility-page">
    <div>
      <el-button type="primary" @click="fetchCompatibility">刷新 </el-button>
    </div>
    <el-table
      show-overflow-tooltip
      stripe
      border
      :data="compatibilityData"
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template #default="props">
          <div class="expand-content">
            <el-table
              show-overflow-tooltip
              stripe
              border
              :data="props.row.providers"
            >
              <el-table-column prop="provider" label="提供商" />
              <el-table-column
                prop="active"
                :formatter="formatStatus"
                label="状态"
              />>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="serviceType" label="服务类型" />
      <el-table-column prop="displayName" label="服务名称" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getProviderCompatibility } from "@/api/adminProvidersApi";

type providersType = {
  active: boolean;
  provider: string;
};
interface ProviderCompatibility {
  serviceType: string;
  displayName: string;
  providers: providersType[];
}

const compatibilityData = ref<ProviderCompatibility[]>([]);

async function fetchCompatibility() {
  try {
    const { success, data, message } = await getProviderCompatibility();
    if (success) {
      compatibilityData.value = data;
    } else {
      ElMessage.error(message || "获取兼容性信息失败");
    }
  } catch (error) {
    ElMessage.error("请求兼容性信息失败");
  }
}
const formatStatus = (row: providersType) => {
  return row.active ? "激活" : "未激活";
};
onMounted(() => {
  fetchCompatibility();
});
</script>

<style scoped>
.provider-compatibility-page {
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.expand-content {
  width: 400px;
  margin-left: 45px;
}
</style>
